<template>
  <div class="cart-bottom-bar">
    <div class="cart-bottom-check">
      <check-button :isChecked="isCheckedAll" @click.native="checkedAll"></check-button>
      <span>全选</span>
    </div>
    <div class="cart-bottom-price">
      合计：
      <span>¥ {{totalPrice}}</span>
      元
    </div>
    <div class="cart-bottom-btn">
      提交订单({{checkedLength}})
    </div>
  </div>
</template>

<script>
  import CheckButton from '@/components/content/CheckButton.vue';
  export default {
    name: "ShopBottomBar",
    components: {
      CheckButton
    },
    methods: {
      checkedAll() {
        // 1. 都选中 => 都不选中 
        // 2. 有部分选中或者全部都没有选中 => 都选中
        if (this.isCheckedAll) {
          this.$store.state.cartList.forEach(item => item.checked = false)
        } else {
          this.$store.state.cartList.forEach(item => item.checked = true)
        }
      }
    },
    computed: {
      totalPrice() {
        return this.$store.state.cartList.filter(item => {
           return item.checked
        }).reduce((prev, item) => {
          return prev + item.price * item.count
        }, 0).toFixed(2)
      },
      checkedLength() {
        return this.$store.state.cartList.filter(item => item.checked).
        reduce((prev, item) => {
          return prev + item.count
        }, 0)
      },
      isCheckedAll() {
        if (this.$store.state.cartList.length === 0) return false
        return !this.$store.state.cartList.find(item => !item.checked)
      }
    }
  }
</script>

<style scoped>
  .cart-bottom-bar {
    display: flex;
    align-items: center;
    font-size: 15px;
    position: absolute;
    bottom: 52px;
    width: 100%;
    height: 40px;
  }
  .cart-bottom-check {
    display: flex;
    width: 70px;
    padding-left: 10px;
  }
  .cart-bottom-check span {
    padding-left: 5px;
  }
  .cart-bottom-price {
    flex: 1;
    padding-left: 15px;
  }
  .cart-bottom-price span {
    color: red;
  }
 
  .cart-bottom-btn {
    width: 120px;
    line-height: 40px;
    text-align: center;
    padding: 0 15px;
    color: white;
    background-color: red;
  }

</style>